<script setup>
	import Card from '../components/Card.vue';
	import {
		ref,
		watch
	} from "vue"
	import SelectBlock from '../components/SelectBlock.vue';
	import collectionbrowse from '../hooks/CollectionBrowse.js';
	import jobCard from '../components/JobCard.vue';
	import ProjectCard from '../components/ProjectCard.vue';
	const {
		stateValue,
		infoValue,
		stateOptions,
		infoOptions,
	} = collectionbrowse()

	const refreshing = ref(true)
	const finished = ref(false)
	const loading = ref(false)
	const onRefresh = () => {
		setTimeout(() => {
			refreshing.value = false
		}, 2000)
	}
	watch(loading, () => {
		console.log(loading.value);
	})
	const onLoad = () => {}
</script>

<template>
	<div class="search">
		<van-button icon="search" type="primary" plain size="small">搜索</van-button>
	</div>
	<van-sticky>
		<van-dropdown-menu active-color="var(--main-color)">
			<van-dropdown-item v-model="stateValue" :options="stateOptions" />
			<van-dropdown-item v-model="infoValue" :options="infoOptions" />
		</van-dropdown-menu>
		<van-button>确定</van-button>
	</van-sticky>
	<div class="container">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<ProjectCard v-for="index in 5"></ProjectCard>
				<jobCard v-for="index in 5"></jobCard>
			</van-list>
		</van-pull-refresh>
	</div>


</template>

<style scoped>
	.container {
		margin: 0 auto;
		padding: var(--page-padding);
		box-sizing: border-box;
		width: 100%;
		background-color: var(--main-background-color);
		overflow: hidden;
	}

	.search {
		padding: 20px;
		background-color: white;
		box-shadow: var(--main-shadow);
	}

	.filter {
		width: 100%;
	}

	.van-button {
		width: 100%;
	}

	.van-pull-refresh {
		overflow: visible;
	}
</style>
